<!--  -->
<template>
  <div class="list">
    <template v-if="albumList.length > 0">
      <!-- <draggable v-model="albumList" :delay="100" chosenClass="chosen" ghostClass="ghost" forceFallback="true" animation="500" @start="onStart" @end="onEnd" style="display: flex;flex-wrap: wrap;"> -->
        <template v-for="(item, index) in albumList">
          <AlbumItem :album="item" :index="index" :key="item.id" />
        </template>
      <!-- </draggable> -->
    </template>
    <div v-else class="empty">暂无相册</div>
  </div>
</template>

<script>
import AlbumItem from "../albumItem";
import { mapGetters, mapActions } from 'vuex'
import { swapPhotoAlbum } from '@/api/content/operate'
import draggable from 'vuedraggable'
import store from '@/store'
export default {
  components: {
    AlbumItem,
    draggable
  },
  data() {
    return {};
  },
  computed: {
    albumList: {
      get(){
        return store.getters.albumList
      },
      set(){

      }
    },
    // ...mapGetters(['albumList'])
  },
  watch: {},
  methods: {
    ...mapActions(['GetPhotoAlbum']),
    //开始拖拽事件
    onStart(e){
    },
    //拖拽结束事件
    async onEnd(e) {
      let oldIndex = e.oldIndex,
          newIndex = e.newIndex

      console.log('拖拽结束事件---->', oldIndex, newIndex)

      if(oldIndex === newIndex) return

      let item1 = this.albumList[oldIndex],
          item2 = this.albumList[newIndex]
      
      if(!item1 || !item2) return

      let list = [item1.id, item2.id],
          { code, msg } = await swapPhotoAlbum(list)
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if(code === 0){
        this.GetPhotoAlbum()
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped lang="less">
.list {
  display: flex;
  flex-wrap: wrap;
  
}
.empty{
  width: 100%;
  text-align: center;
  margin-top: 50px;
}
 /*选中样式*/
.chosen {
    // box-shadow: 0 0 10px 10px rgba(0, 0, 0, .2);
}
.ghost{
  opacity: 0;
}
</style>
